<template>
  <el-dialog v-model="updateDialog" title="课程修改" width="800">
    <el-form
        :model="rowData"
        :rules="subjectRules"
    >
      <el-form-item label="课程名" label-width="80" prop="subjectName">
        <el-input autocomplete="off" v-model="rowData.subjectName" />
      </el-form-item>
      <el-form-item label="课程描述" label-width="80" prop="subjectDescription">
        <el-input autocomplete="off" v-model="rowData.subjectDescription" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialog = false" >关闭</el-button>
        <el-button @click="save" type="primary" :disabled="!rowData.subjectName || !rowData.subjectDescription">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from '@/axios/index.js'
import {ElMessage} from "element-plus";
import {reactive, ref} from "vue";

let updateDialog = defineModel('updateDialog')
const emit = defineEmits(['initData'])
let rowData = defineModel('rowData')

//用户添加表单校验规则
const subjectRules = reactive({
  subjectName: [
    {required: true, message: '请输入课程名称', trigger: 'blur'},
    {min: 1, max: 10, message: '长度在 1 到 10 个字符',trigger: 'blur'},
  ],
  subjectDescription: [
    {required: true, message: '请输入课程描述', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在 3 到 20 个字符',trigger: 'blur'},
  ],
})



//保存用户
function save() {
  axios.put('/api/v1/admin/subject', null, {params: {
      id: rowData.value.id,
      subjectName: rowData.value.subjectName,
      subjectDescription: rowData.value.subjectDescription,
      updateId:rowData.value.updateId
    }}).then(resp=>{
    ElMessage({
      message: resp.data.message,
      type: 'success',
      duration: 1500,
      onClose: function(){
        updateDialog.value = false
        emit('initData')
      }
    })
  })
}
</script>

<style scoped>

</style>